<template>
  <div class="Source">
    <div class="top-wrap">
      <div class="btn-wrap">
<!--        <el-button @click="handleAddSource">新增情报源</el-button>-->
        <el-button @click="handleSourceSetting">情报优先级配置</el-button>
      </div>
      <div class="search-wrap">
<!--        <el-input placeholder="搜索情报源名称" v-model="searchInput">
          <i slot="suffix" class="el-input__icon el-icon-search"></i>
        </el-input>-->
      </div>
    </div>
    <!--内容部分S-->
    <div class="content-wrap clear">
      <div class="item-box" :key="index" v-for="(item, index) in list">
        <div class="row-1 clear">
          <div class="col">
            <div class="icons-wrap">
              <img class="icons" :src="item.id===1 ? iconsLogoZidingyi : iconsLogo" alt="" />
            </div>
            <div class="text-wrap">
              <div class="text" :class="item.id===1?'cursor':''" @click="handleRouterGo(item)">{{ item.name }}</div>
              <div class="text-2">
                <span class="text-label">厂商</span
                ><span class="text-name">{{ item.manufacturer }}</span>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="text-2">
              <span class="text-label">接入状态</span><span class="text-name">
              <i class="status" :class=" item.status===0 ? 'green': 'red' "></i>{{ item.status===0 ? '正常': '异常' }}
              <!--<span class="el-icon-warning-outline"></span>-->
            </span>
            </div>
          </div>
        </div>
<!--        <div class="row-2 clear">
          <div class="col">
            <span class="text-label">有效情报数</span
            ><span class="text-name">{{ item.effective_num }} 条</span>
          </div>
          <div class="col">
            <span class="text-label">命中情报数</span
            ><span class="text-name">{{ item.hit_num }} 条</span>
          </div>
          <div class="col">
            <span class="text-label">最近更新时间</span
            ><span class="text-name">{{ item.updated_at }}</span>
          </div>
        </div>-->
        <div class="row-3">
          <el-button v-if="item.id===1" type="text" @click="handleRouterGo(item)">立刻导入</el-button>
          <el-button v-if="item.id!==1" type="text" @click.stop="handleSourceApikey(item)">更新</el-button>
          <!--<el-button type="text">更新</el-button>-->
          <el-button v-if="item.id===1" type="text" @click.stop="handleSourceUptate">更新记录</el-button>
        </div>
      </div>
<!--      <div class="item-box">
        <div class="row-1 clear">
          <div class="col">
            <div class="icons-wrap">
              <img class="icons" :src="iconsLogo" alt="" />
            </div>
            <div class="text-wrap">
              <div class="text">深信服威胁情报</div>
              <div class="text-2">
                <span class="text-label">厂商</span
                ><span class="text-name">深信服</span>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="text-2">
              <span class="text-label">接入状态</span
              ><span class="text-name"
                ><i class="status green"></i>正常
                <span class="el-icon-warning-outline"></span
              ></span>
            </div>
          </div>
        </div>
        <div class="row-2 clear">
          <div class="col">
            <span class="text-label">有效情报数</span
            ><span class="text-name">100,000 条</span>
          </div>
          <div class="col">
            <span class="text-label">命中情报数</span
            ><span class="text-name">0 条</span>
          </div>
          <div class="col">
            <span class="text-label">最近更新时间</span
            ><span class="text-name">2023-10-10 12:00:00</span>
          </div>
        </div>
        <div class="row-3">
          <el-button type="text">导入</el-button>
          <el-button type="text">设置</el-button>
          <el-button type="text">更新</el-button>
          <el-button type="text" @click="handleSourceUptate"
            >更新记录</el-button
          >
        </div>
      </div>-->
<!--      <div class="item-box" @click="handleRouterGo">自定义情报</div>-->
    </div>
    <!--内容部分E-->
    <m-dialog title="更新情报源" v-model="dialog.visible" width="450px">
      <div class="dialog-content">
        <m-form ref="MForm" class="mForm" :model="formData">
          <!--<m-form-item
            label="厂商"
            prop="manufacturer"
            :rules="[{ required: true, message: '请选择内容' }]"
          >
            <m-select v-model="formData.manufacturer" placeholder="请选择">
              <m-option
                v-for="item in manufacturer.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </m-option>
            </m-select>
          </m-form-item>-->
          <m-form-item
              label="厂商"
              prop="manufacturer"
              :rules="[{ required: true, message: '请选择内容' }]"
          >
            <m-input
                disabled
                v-model="formData.manufacturer"
                placeholder="请选择内容"
            ></m-input>
          </m-form-item>
          <m-form-item
            label="API KEY"
            prop="APIKEY"
            :rules="[{ required: true, message: '请输入API KEY' }]"
          >
            <m-input
              v-model="formData.APIKEY"
              @input.native="cleanInput"
              placeholder="请输入API KEY"
            ></m-input>
          </m-form-item>
          <!--<m-form-item
            label="TOKEN值"
            prop="TOKEN"
            :rules="[{ required: true, message: '请输入TOKEN值' }]"
          >
            <m-input
              v-model="formData.TOKEN"
              placeholder="请输入TOKEN值"
            ></m-input>
          </m-form-item>-->
          <!--          <m-form-item label="情报更新频率"
                       prop="manufacturer"
                       :rules="[{ required: true, message: '请选择内容' }]">
            <m-select v-model="formData.manufacturer" placeholder="请选择">
              <m-option
                  v-for="item in manufacturer.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </m-option>
            </m-select>
          </m-form-item>
          <m-form-item label="请求方式"
                       prop="requestMethod"
                       :rules="[{ required: true, message: '请选择内容' }]">
            <el-radio-group v-model="formData.requestMethod">
              <el-radio :label="0">HTTP GET</el-radio>
              <el-radio :label="1">HTTP POST</el-radio>
            </el-radio-group>
          </m-form-item>-->
        </m-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <m-button type="primary" @click="handleSourceUptateApiKey"
          >确 定</m-button
        >
        <m-button @click="dialog.visible = false">取 消</m-button>
      </span>
    </m-dialog>

    <!--情报优先级配置 S-->
    <m-dialog
      title="情报优先级配置"
      v-model="dialog.visibleSetting"
      width="450px"
    >
      <div class="dialog-content">
        <div class="info-wrap">
          <span class="icons-info"></span>
          <div class="info-text">
            在平台中，将按以下优先级显示情报信息，若最高优先级信息为空，则显示下一优先级的信息，以此类推
          </div>
        </div>
        <div class="info-table">
          <div class="info-heard">
            <div class="item">优先级</div>
            <div>情报源</div>
          </div>
          <draggable v-model="list"
                     class="drag-container"
                     handle=".holder"
                     :move="onMove"
                     @end="handleEndSort"
                     animation="500">
            <div class="item-drag" v-for="(item, index) in list" :key="item.id">
              <span class="item-id">{{ index+1 }}</span>
              <span class="item-name">{{ item.name }}</span>
              <span class="holder-box">
                <span class="holder"></span>
              </span>
            </div>
          </draggable>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <m-button type="primary" @click="handleSourceSort"
          >确 定</m-button
        >
        <m-button @click="handleSourceSortCancel">取 消</m-button>
      </span>
    </m-dialog>
    <!--情报优先级配置 D-->

    <!--更新记录 S-->
    <m-dialog title="更新记录" v-model="dialog.visibleUptate" width="720px">
      <div class="dialog-content">
        <m-table-tmpl :hideOperation="true">
          <template slot="table">
            <m-table :data="tableData" @sort-change="sortChange">
              <m-table-column
                prop="date"
                label="序号"
                type="index"
                align="center"
                width="50"
                :index="(index) => tableIndex(index, page, pageSize)"
              ></m-table-column>
              <m-table-column prop="updated_at" label="更新时间"></m-table-column>
              <m-table-column prop="operator" label="操作人"> </m-table-column>
              <!--<m-table-column prop="status" label="更新结果" width="160">
                <template slot-scope="scope">
                  <div class="status-red" v-if="scope.row.status === 1">
                    成功
                  </div>
                  <div class="status-yellow" v-if="scope.row.status === 2">
                    失败
                  </div>
                </template>
              </m-table-column>-->
              <m-table-column prop="describe" label="更新描述"> </m-table-column>
            </m-table>
          </template>

          <template slot="pagination">
            <m-pagination
              :current-page="page"
              :page-size="10"
              :page-sizes="pageSizes"
              :total="tableTotal"
              :layout='"total, prev, pager, next"'
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            >
            </m-pagination>
          </template>
        </m-table-tmpl>
      </div>
      <span slot="footer" class="dialog-footer">
      <!--<m-button type="primary" @click="dialog.visibleUptate = false"
          >确 定</m-button
        >-->
        <m-button @click="dialog.visibleUptate = false">关闭</m-button>
      </span>
    </m-dialog>
    <!--更新记录 E-->
  </div>
</template>

<script>
import draggable from "vuedraggable";
// 引入接口
import {
  sourceList,
  intelligenceSourceSort,
  intelligenceSourceApikey,
  intelligenceSourceUpdateRecordList
} from "@/request/source/index";
import dayjs from 'dayjs'

export default {
  name: "SourceIndex",
  data() {
    return {
      list: [
        /*{ id: 1, name: "自定义威胁情报" },
        { id: 2, name: "深信服威胁情报" },
        { id: 3, name: "微步在线威胁情报" },
        { id: 4, name: "绿盟威胁情报" },
        { id: 5, name: "CNVD开源平台" },
        { id: 6, name: "CVE开源平台" },*/
        // ...
      ],
      searchInput: "",
      iconsLogo: require("@/assets/image/source/icons_logo2.png"),
      iconsLogoZidingyi: require("@/assets/image/source/icons_logo_zidingyi.png"),
      dialog: {
        visible: false,
        visibleSetting: false,
        visibleUptate: false,
      },
      formData: {
        manufacturer: "选项1",
        APIKEY: "",
        frequency: "",
        requestMethod: 0,
        TOKEN: "",
      },
      manufacturer: {
        options: [
          {
            value: "选项1",
            label: "微步在线",
          },
          {
            value: "选项2",
            label: "微步在线2",
          },
        ],
      },
      frequency: {
        options: [
          {
            value: "选项1",
            label: "每 8 小时",
          },
          {
            value: "选项2",
            label: "每 16 小时",
          },
        ],
      },
      tableData: [],
      page: 1,
      total: 0,
      tableTotal: 0,
      pageSize: 10,
      pageSizes: [10],
    };
  },
  components: {
    draggable,
  },
  computed: {

  },
  mounted() {
    this.getData();
  },
  methods: {
    // 跳转自定义情报页面
    handleRouterGo(item) {
      if (item.id === 1) {
        this.$router.push({ path: "/source/customSource" });
      }

    },
    /* handleUpdateRecords(){

    },*/
    // 打开apikey设置弹窗
    handleSourceApikey(item) {
      this.dialog.visible = true;
      this.formData.manufacturer = item.manufacturer
      this.formData.APIKEY = ''
    },
    handleSourceUptateApiKey(){
      let apikeyId = this.formData.APIKEY
      intelligenceSourceApikey(apikeyId).then((res) => {
        this.dialog.visible = false
        console.log(res.data.data, 'handleSourceUptateApiKey');
      }).catch((err)=>{
        console.log(err)
      })
    },
    handleSourceSetting() {
      this.dialog.visibleSetting = true;
    },
    handleSourceUptate() {
      this.dialog.visibleUptate = true;
      this.getUpdateRecordList({
        "page": 1,
        "size": 10
      })
    },
    handleSourceSort (){
      let listLen = this.list.length
      let sortArr = []
      this.list.map((item)=>{
        item.weight = listLen--

        sortArr.push({
          id: item.id,
          weight: item.weight
        })
      })
      // console.log(this.list, 'ddddd')
      intelligenceSourceSort(sortArr).then(()=>{
        // console.log(res , 'resresresres')
        this.$message.success("设置成功");
        this.dialog.visibleSetting = false
      }).catch((err)=>{
        console.log(err)
      })
    },
    // 取消排序
    handleSourceSortCancel(){
      this.dialog.visibleSetting = false
      this.getData();
    },
    onMove(){
      // console.log(val)
    },
    handleEndSort(val){
      console.log(val)
      console.log(this.list)
    },
    // 获取数据
    getData() {
      sourceList().then((res) => {
        console.log(res.data.data);
        //id: 1是自定义 2微步本地
        this.list = res.data.data
        this.list.map((item)=>{
          item.updated_at = dayjs(item.updated_at).format('YYYY-MM-DD HH:mm:ss')
        })
      }).catch((err)=>{
        console.log(err);
      });
    },
    // 情报更新记录
    getUpdateRecordList(obj){
      intelligenceSourceUpdateRecordList(obj).then((res)=>{
        this.tableData = res.data.data
        this.tableTotal = res.data.total
        this.tableData.map((item)=>{
          item.updated_at = dayjs(item.updated_at).format('YYYY-MM-DD HH:mm:ss')
        })
      }).catch((err)=>{
        console.log(err)
      })
    },
    // 每页数量改变
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page = 1;
      this.pageSize = val;
      this.getData();
    },
    // 页码变化
    handleCurrentChange(val) {
      this.page = val;
      this.getUpdateRecordList({
        "page": val,
        "size": 10
      })
      this.getData();
    },
    // 排序改变
    sortChange({ column, prop, order }) {
      console.log(column, prop, order);
    },
    cleanInput(event) {
      // 使用DOM的innerText和outerText方法来清理掉非法的输入
      // 获取输入框当前的值
      let value = event.target.value;
      // 过滤掉不允许的字符
      value = value.replace(/[<>]/g, '');
      // 更新数据以移除非法字符
      this.formData.APIKEY = value;
      // 重设光标位置
      event.target.value = this.formData.APIKEY;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/MUI/style/var.scss";
.Source {
  background-color: #f7f9fc !important;
  box-shadow: none !important;
  .top-wrap {
    display: flex;
    justify-items: start;
    .btn-wrap {
      flex: 1;
    }
    .search-wrap {
    }
  }

  // 内容部分S
  .content-wrap {
    //display: flex;
    //justify-items: start;
    margin-top: px2(8);
    .item-box {
      float: left;
      width: 49.5%;
      background-color: #fff;
      //height: px2(215);
      height: px2(127);
      border: 1px solid #d3d7de;
      margin-bottom: px2(16);
      padding: px2(15) px2(18);
      &:nth-child(odd) {
        margin-right: 1%;
      }

      .row-1 {
        //margin-bottom: px2(25);
        margin-bottom: px2(17);
        .col {
          float: left;
          width: 50%;
          display: flex;
          align-items: end;
          height: 56px;
          .icons-wrap {
            width: px2(56);
            height: px2(56);
            border-radius: 14px;
            border: 1px solid #e1e5eb;
            display: inline-block;
            margin-right: px2(16);
            vertical-align: bottom;
            .icons {
            }
          }
          .text-wrap {
            display: inline-block;
            .text {
              color: $fontColorW;
              font-size: px2(14);
              margin-bottom: px2(8);
            }
          }
          .text-2 {
            font-size: px2(12);
            .text-label {
              margin-right: px2(20);
            }
          }
        }
      }
    }
    .row-2 {
      margin-bottom: px2(15);
      .col {
        float: left;
        width: 50%;
        display: flex;
        font-size: px2(12);
        margin-bottom: px2(8);
        .text-label {
          width: px2(90);
        }
      }
    }
  }
  // 内容部分E
}

.text-label {
  color: $fontColorL;
}
.text-name {
  color: $fontColor;
}
.status {
  width: 6px;
  height: 6px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  margin-right: px2(4);
  &.green {
    background: #45d9a3;
  }
  &.red {
    background: #db4c35;
  }
}
.el-icon-warning-outline {
  color: $mainColor;
}
.info-wrap {
  background-color: #f7f7f8;
  color: #6f7785;
  display: flex;
  padding: px2(4);
  border-radius: px2(2);
  margin-bottom: px2(8);
  .info-text {
    flex: 1;
  }
  .icons-info {
    display: block;
    width: px2(16);
    height: px2(20);
    background-image: url("./../../../assets/image/source/icons_info.png");
    vertical-align: top;
    margin-right: px2(4);
  }
}
.info-table {
  border: px2(2) solid #e1e5eb;
  .info-heard {
    height: px2(32);
    line-height: px2(32);
    background-color: #edf1f7;
    display: flex;
    .item {
      padding: 0 px2(8);
      margin-right: px2(16);
      position: relative;
      &:before {
        content: "";
        display: block;
        position: absolute;
        width: px2(1);
        height: px2(16);
        background-color: #d3d7de;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }
    }
  }
  .drag-container {
    .item-drag {
      height: px2(40);
      line-height: px2(40);
      display: flex;
      align-items: center;
      border-top: 1px solid #e1e5eb;
      /*&:last-child{
        border-bottom: 0 solid #E1E5EB;
      }*/
      .item-id {
        display: block;
        width: px2(48);
        text-align: center;
        //flex: 1;
      }
      .item-name {
        flex: 1;
        padding-left: px2(12);
      }
      .holder-box {
        display: block;
        width: px2(40);
      }
      .holder {
        display: block;
        width: px2(16);
        height: px2(16);
        background-image: url("./../../../assets/image/source/holder.png");
        cursor: pointer;
        margin: auto;
      }
    }
  }
}
</style>
